<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
    <ContentWrap class="search-form">
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        clas="-mb-15px"
        label-width="68px"
      >
        <el-form-item label="老人名称" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="请输入姓名"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="请选择姓别">
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_SEX)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          /></el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <Table
      :columns="columns"
      @page-change="getList"
      :page-param="queryParams"
      :page-data="Elderdata"
      @row-dblclick="handleTableDblclick"
      :adaptive="true"
    >
      <template #issex="{ row }">
        <dict-tag :type="DICT_TYPE.COMMON_SEX" :value="row.status" />
      </template>
    </Table>
  </Dialog>
</template>
<script lang="ts" name="ElderInfo" setup>
import { DICT_TYPE, getIntDictOptions, getDictObj } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as ElderApi from '@/api/elder/elderInfo'
const emit = defineEmits(['rowDblclick'])

const loading = ref(true) // 列表的加载中'
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const queryFormRef = ref() // 搜索的表单
const queryParams = ref({
  name: undefined,
  sex: undefined,
  pageNo: 1,
  pageSize: 100
})
const columns: TableColumnList = [
  {
    label: '老人编号',
    prop: 'elderNo',
    minWidth: '100'
  },
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '性别',
    prop: 'sex',
    formatter: ({ sex }) => getDictObj(DICT_TYPE.COMMON_SEX, sex).label
  },
  {
    label: '电话',
    prop: 'mobile'
  },
  {
    label: '身份证号',
    prop: 'identityCard'
  },
  {
    label: '出生日期',
    prop: 'birthday',
    formatter: ({ birthday }) => formatDate(birthday, 'YYYY-MM-DD')
  },
  {
    label: '年龄',
    prop: 'age',
    formatter: ({ birthday }) => calcAge(birthday)
  },
  {
    label: '生日类型',
    prop: 'birthdayType',
    formatter: ({ birthdayType }) => getDictObj(DICT_TYPE.CALENDAR_TYPE, birthdayType).label
  },
  {
    label: '婚姻状况',
    prop: 'maritalStatus',
    formatter: ({ maritalStatus }) => getDictObj(DICT_TYPE.MARITAL_STATUS, maritalStatus).label
  },
  {
    label: '政治面貌',
    prop: 'politicalOutlook'
  },
  {
    label: '家庭住址',
    prop: 'address'
  },
  {
    label: '户籍地址',
    prop: 'domicileAddress'
  },
  {
    label: '老人类别',
    prop: 'type',
    formatter: ({ type }) => getDictObj(DICT_TYPE.ELDER_TYPE, type).label
  },
  {
    label: '居住情况',
    prop: 'liveType',
    formatter: ({ liveType }) => getDictObj(DICT_TYPE.ELDER_LIVE_TYPE, liveType).label
  },
  {
    label: '助老卡号',
    prop: 'careCard'
  },
  {
    label: '社保卡号',
    prop: 'socialSecurityNumber'
  },
  {
    label: '登记入住日期',
    prop: 'checkinDate',
    formatter: ({ createTime }) => formatDate(createTime, 'YYYY-MM-DD')
  }
]
onMounted(() => {
  loading.value = true
  getList()
})

const handleTableDblclick = (row) => {
  emit('rowDblclick', row)
  close()
}

/** 查询角色列表 */
const Elderdata = ref()
const getList = async () => {
  try {
    Elderdata.value = await ElderApi.query(queryParams.value)
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}
/** 重置按钮操作 */

const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 关闭弹窗 */
const close = async () => {
  dialogVisible.value = false
}

const calcAge = (birthday) => {
  if (!birthday) return ''
  let birthdayYear = parseInt(formatDate(birthday, 'YYYY'))
  let currentYear = parseInt(formatDate(new Date(), 'YYYY'))
  let age = currentYear - birthdayYear
  return age.toString()
}

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  handleQuery()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
